<template>

<div class="first-box">

    <div class="form-container">
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="10%"
      class="custom-form"
      @submit.native.prevent
    >
        <el-form-item prop="title">
        <el-input v-model="formData.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <br>
      <el-form-item prop="author">
        <el-input v-model="formData.author" placeholder="请输入作者"></el-input>
      </el-form-item>
      <br>
      <el-form-item prop="type">
        <el-input v-model="formData.type" placeholder="请输入类型"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
      <el-form-item>
        <el-button :icon="ArrowRightBold" @Click="submitForm(form)" style="width: 4vw; height: 4vw ; position: relative; left: 35%; top: 60%;" circle />
      </el-form-item>
      <el-divider direction="vertical" />
      <div class="upload_box">  
        <el-upload
        class="avatar-uploader"
        :action="url"
        :show-file-list="true"
        :on-success = "successHandler"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <el-icon v-else class="el-icon-plus avatar-uploader-icon"> <Plus></Plus> </el-icon>
        </el-upload>
      </div>
    </el-form>
  </div>
    <!-- 加个壳子上去 -->

</div>
</template>

<script setup>
import imageShow from '../components/imageShow.vue'
import { Plus , Search , ArrowRightBold} from '@element-plus/icons-vue'
import {ref} from "vue"
import { ElMessage } from 'element-plus'
import {useArticleStore} from "../stores/createarticles.js"
import getLatestImage from "../api/getLatestImage"
const formData = useArticleStore();
const imageUrl = ref("")
const image_id = ref("")
const url = "http://localhost:5173/api/image/upload?token=Bearer " + localStorage.getItem("jwttoken")
const form = ref("")
const props =  defineProps({
    value:String
})

const emit = defineEmits({
  setFlag:[]
})


    const rules = {
      title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
      author: [{ required: true, message: '作者不能为空', trigger: 'blur' }],
      type: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
      // 其他表单项的验证规则
    };

    const error_message = () => {
    ElMessage({message:'请检查信息是否出现错误或空缺',
    type:"error"})
    }

    const submitForm = (formEl) => {
      if (!formEl) return
      formEl.validate((valid) => {
      if (valid) {
      if (formData.author.trim !== "" && formData.type.trim !== "" && formData.title.trim !== "" && image_id.value.trim !== "" ) {
          formData.imageId =  image_id.value
          emit("setFlag")
        } else {
          ElMessage("请补齐空项，并上传一张封面")
        }
      } else {  
        error_message()
      }
  })
        
    };
    function successHandler (res,file){
        console.log(res)     
        image_id.value =res
        console.log(image_id.value)
        imageUrl.value = URL.createObjectURL(file.raw);
    }
    function beforeAvatarUpload(file) {
        const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          ElMessage.error('上传头像图片只能是 JPG / PNG 格式!');
        }
        if (!isLt2M) {
          ElMessage.error('上传头像图片大小不能超过 2MB!');
        }


        return isJPG && isLt2M;
      }
</script>

<style>
.first-box
{
    width: 100%;
    height: 100%;
    position: relative;
}
.panel-box {
    position: absolute;
}
.form-container {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #1a2a6c, #6a5fcc, #ddaaaa);
  color: #ffffff;
  display: flex;
}

.custom-form {
  background-color: #f7e9c3f6;
  padding: 5%;
  padding-left: 15%;
  padding-top:14%;
  border-radius: 4px;
  width: 80%;
  height: 90%;
  position: relative;
  left: 10%;
  top: 3%;
}

.el-input{
    width: 30%;
}

.upload_box {
  position: absolute;
  left: 58%;
  top: 31%;
  height: 60%;
  width: 40%;
}

.avatar-uploader .el-upload {
    border: 2px dashed #1c1616;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #6ba9e7;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>